.PopupScreen {
  position: fixed;
  top: 100px;
  @width: var(--popup-width);
  width: @width;
  left: calc(50% - $width / 2);
  max-height: calc(100% - 200px);
  background-color: white;
  border-radius: 2px;
  box-shadow: 1px 1px 50px rgb(0 0 0 / 30%);
  .et-flex-column-center();

  &.fullScreen {
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  &.hidden {
    left: 0;
    top: unset;
    bottom: 0;
    width: 300px !important;
    height: inherit;
  }

  .bounce-enter-active();

  &.close {
    .bounce-leave-active();
  }

  .PopupScreenHeader {
    width: 100%;
    padding: 10px 18px;
    background-color: @table-header-bg;
    flex-shrink: 0;

    &.canMove {
      cursor: move;
    }

    .et-flex-spacebetween();

    .title {
      font-size: @font-size-large;
      font-weight: bold;
      color: @heading-color;
      user-select: none;
    }

    .toolbar {
      .et-flex-end();

      &>*:not(:last-child) {
        margin-right: 20px;
      }

      .icon {
        font-size: 14px;
        cursor: pointer;
      }
    }
  }

  .popupContainer {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  &.fullScreen {
    .popupContainer {
      max-height: unset;
      flex: 1;
    }
  }
}

.bounce-enter-active {
  animation: bounce-in 0.3s;
}

.bounce-leave-active {
  animation: bounce-out 0.3s;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes bounce-out {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}